<template>
  <el-row class="line">
    <div class="echartsTop">
      <i class="iconfont icon-bingtutongji"></i>库存分类
    </div>
    <div class="echartsBox">
      <div class="inventoryPieLeft">
        <div id="inventoryPie" class="allWidthHeight" />
      </div>
      <div class="inventoryPieRight">
        <div id="inventoryPie2" class="allWidthHeight" />
      </div>
    </div>
  </el-row>
</template>
<script>
import * as echarts from 'echarts'
export default {
  props: {},
  data() {
    return {
      myChart: null,
      myChart2: null,
      value1: ''
    }
  },
  watch: {},
  mounted() {},
  methods: {
    infoSize() {
      this.myChart.resize()
      this.myChart2.resize()
    },
    allPie(data) {
      this.setInventoryPie(data)
      this.setInventoryPie2(data)
    },
    generateRandomColor() {
      const letters = '0123456789ABCDEF'
      let color = '#'
      for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)]
      }
      return color
    },
    /* 库存分类echarts */
    setInventoryPie(data) {
      let list = []
      let name = []
      if (data.rawDetails) {
        data.rawDetails.forEach((item) => {
          let color = this.generateRandomColor()
          name.push(item.materialName)
          let obj = {
            value: item.allNum,
            name: item.materialName,
            num: item.numRate,
            // itemStyle: { color: '#53C1BE' },
            color: color,
            label: {
              color: '#fff',
              fontSize: '10px'
            }
          }
          list.push(obj)
        })
      }
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          // orient: 'vertical',
          data: name,
          bottom: '0',
          width: '240px',
          textStyle: {
            fontSize: '9px',
            color: '#fff' // 这里设置图例的字体颜色为红色
          },
          itemWidth: 5, // 设置图例标记的图形宽度
          itemHeight: 5 // 设置图例标记的图形高度
        },
        series: [
          {
            type: 'pie',
            radius: ['25%', '75%'],
            center: ['50%', '40%'],
            minAngle: 10,
            data: list,
            label: {
              show: true, // 显示数值
              position: 'inner', // 数值显示的位置，'outside' 表示在扇区外侧
              // formatter: '{b}\n{d}%' // 数值的格式，{b} 是数据名，{c} 是数值，{d} 是百分比
              formatter: function (params) {
                return params.data.num + '%'
                // let name = params.name
                // return name.length > 3
                //   ? name.slice(0, 3) + '...' + '\n' + params.data.num + '%'
                //   : name + '\n' + params.data.num + '%'
              }
            },
            emphasis: {
              label: {
                show: false,
                fontSize: '20',
                fontWeight: 'bold'
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ],
        graphic: {
          type: 'text',
          left: 'center', // 相对位置
          top: '39%', // 相对位置
          style: {
            text: '原料仓', // 中间显示的文本
            textAlign: 'center',
            fill: '#fff', // 文本颜色
            fontSize: 12
          }
        }
      }
      if (
        this.myChart != null &&
        this.myChart !== '' &&
        this.myChart !== undefined
      ) {
        this.myChart.dispose() // 销毁
      }
      this.myChart = echarts.init(document.getElementById('inventoryPie'))
      this.myChart.clear()
      this.myChart.setOption(option, true)
    },
    setInventoryPie2(data) {
      let proList = []
      let nameList = []
      if (data.proDetails) {
        data.proDetails.forEach((item) => {
          let color = this.generateRandomColor()
          nameList.push(item.materialName)
          let obj = {
            value: item.allNum,
            name: item.materialName,
            num: item.numRate,
            // itemStyle: { color: '#53C1BE' },
            color: color,
            label: {
              color: '#fff',
              fontSize: '10px'
            }
          }
          proList.push(obj)
        })
      }
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          // orient: 'vertical',
          data: nameList,
          bottom: '0',
          width: '240px',
          textStyle: {
            fontSize: '9px',
            color: '#fff' // 这里设置图例的字体颜色为红色
          },
          itemWidth: 5, // 设置图例标记的图形宽度
          itemHeight: 5 // 设置图例标记的图形高度
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['25%', '75%'],
            center: ['50%', '40%'],
            data: proList,
            label: {
              show: true, // 显示数值
              position: 'inner', // 数值显示的位置，'outside' 表示在扇区外侧
              // formatter: '{b}\n{d}%' // 数值的格式，{b} 是数据名，{c} 是数值，{d} 是百分比
              formatter: function (params) {
                return params.data.num + '%'
                // let name = params.name
                // return name.length > 3
                //   ? name.slice(0, 3) + '...' + '\n' + params.data.num + '%'
                //   : name + '\n' + params.data.num + '%'
              }
            },
            emphasis: {
              label: {
                show: false,
                fontSize: '20',
                fontWeight: 'bold'
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ],
        graphic: {
          type: 'text',
          left: 'center', // 相对位置
          top: '39%', // 相对位置
          style: {
            text: '成品仓', // 中间显示的文本
            textAlign: 'center',
            fill: '#fff', // 文本颜色
            fontSize: 12
          }
        }
      }
      if (
        this.myChart2 != null &&
        this.myChart2 !== '' &&
        this.myChart2 !== undefined
      ) {
        this.myChart2.dispose() // 销毁
      }
      this.myChart2 = echarts.init(document.getElementById('inventoryPie2'))
      this.myChart2.clear()
      this.myChart2.setOption(option, true)
    }
  }
}
</script>
<style lang='scss' scoped>
.line {
  height: 50%;
  .echartsTop {
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    font-weight: normal;
    color: #c0e0fe;
    margin: 0;
    padding: 0 0 5px 7px;
    i {
      color: #c0e0fe;
      margin-right: 10px;
    }
  }
  .echartsBox {
    height: calc(100% - 25px);
    .inventoryPieLeft {
      width: 50%;
      padding-right: 10px;
      height: 100%;
      float: left;
    }
    .inventoryPieRight {
      padding-left: 10px;
      width: 50%;
      height: 100%;
      float: left;
    }
  }
}
</style>
<style lang='scss'>
</style>
